<#-- 登录页 -->
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <base href="${baseURL}" target="_self">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>登录 - ${title}</title>
    <meta name="keywords" content="${keywords}"/>
    <meta name="description" content="${description}"/>
    <link href="${commonPath}css/common.css" type="text/css" rel="stylesheet">
    <link href="${commonPath}css/themify-icons/style.css" type="text/css" rel="stylesheet">
    <script src="${commonPath}js/cryptoJS/core.js" type="text/javascript"></script>
    <script src="${commonPath}js/cryptoJS/sha256.js" type="text/javascript"></script>
    <script src="${commonPath}js/tool.js" type="text/javascript"></script>
    <script src="${commonPath}js/ajax.js" type="text/javascript"></script>
    <script src="${commonPath}js/json2.js" type="text/javascript"></script>
    <script type="text/javascript" src="${commonPath}js/jquery/jquery.min.js"></script>

    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <#-- 引入页头 -->
    <@include action="${newPublic_2}"/>

    <div class="skeleton">
        <div class="main">
            <div class="loginModule">
                <div class="tabs-nav">
                    <div>
                        <div id="local_tab" class="tabs-tab">
                            <a href="javascript:void(0)" class="active">账号密码登录</a>
                        </div>
                        <div id="mobile_tab" class="tabs-tab">
                            <a href="javascript:void(0)">手机号登录</a>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="form">
                        <!-- 令牌标记 -->
                        <input type="hidden" id="token" name="token" value="${token}">
                        <div class="form-field">
                            <!-- form-field-container form-field-error -->
                            <div id="userName_field_error" class="form-field-container">
                                <div class="form-field-text">
                                    <div class="form-field-input-container">
                                        <input id="userName" maxLength="40" class="form-field-text-input" type="text"
                                               value="" onfocus="inputBoxClickTip(this);"
                                               onblur="inputBoxOutTip(this);">
                                        <!-- <label class="mi-floating-label form-field-active ">用户名</label>-->
                                        <label class="form-field-label">用户名</label>
                                    </div>
                                </div>

                                <div id="userName_prompt_error" class="form-field-prompt-error"></div>
                            </div>
                        </div>
                        <div class="form-field">
                            <div id="mobile_field_error" class="form-field-container">
                                <div class="form-field-text">
                                    <div class="form-field-input-container">
                                        <input id="mobile" maxLength="11" class="form-field-text-input" type="text"
                                               value=""
                                               onfocus="inputBoxClickTip(this);" onblur="inputBoxOutTip(this);">
                                        <label class="form-field-label">手机号</label>
                                    </div>
                                </div>
                                <div id="mobile_prompt_error" class="form-field-prompt-error"></div>
                            </div>
                        </div>
                        <div class="form-field">
                            <div id="password_field_error" class="form-field-container">
                                <div class="form-field-text">
                                    <div class="form-field-input-container">
                                        <input id="password" maxLength="20" class="form-field-text-input"
                                               type="password"
                                               value="" onfocus="inputBoxClickTip(this);"
                                               onblur="inputBoxOutTip(this);">
                                        <label class="form-field-label">密码</label>
                                    </div>
                                </div>
                                <div id="password_prompt_error" class="form-field-prompt-error"></div>
                            </div>
                        </div>
                    </div>
                    <div id="token_prompt_error" style="color: red;">${(error['token'])!}</div>
                    <div class="otherInfo">
                        <a href="findPassWord/step1" tabindex="8">找回密码？</a>
                        <label>
                            <input id="rememberMe" name="rememberMe" type="checkbox" value="true"/>
                            <span>自动登录</span>
                        </label>
                    </div>
                    <div class="loginButton">
                        <a href="javascript:void(0);" onClick="javascript:ajaxSubmit()" tabindex="6">登&nbsp;录</a>
                    </div>

                    <#-- 引入第三方登录模块 -->
                    <@include action="${systemRelated_thirdPartyLogin_1}"/>
                </div>
            </div>
            <div class="push"><!-- 将页脚固定在页面底部 --></div>
        </div>
    </div>

    <#-- 引入页脚 -->
    <@include action="${newPublic_3}"/>
    <script type="text/javascript">
        $(".form-field").find(".form-field-input-container").bind("mousedown", function (e) {
            $(this).find(".form-field-text-input").focus();

            if ($(this).find(".form-field-label").hasClass("form-field-active")) {
                return;

            }
            $(this).find(".form-field-label").addClass("form-field-active");
        });

        $(document).mousedown(function (e) {
            var target = $(e.target);
            if (target.closest(".form-field-input-container").length == 0) {
                $(".form-field-input-container").each(function () {
                    if ($(this).find(".form-field-label").hasClass("form-field-active")) {
                        if ($(this).find('input[type="text"]').val() == "" || $(this).find('input[type="password"]').val() == "") {
                            $(this).find(".form-field-label").removeClass("form-field-active");
                        }

                    }
                });
            }
        });

        //监听Tab键
        $(document).on('keyup', function (e) {
            if (e.keyCode == 9) {
                var input = $(this).find('input:focus');
                if (input.length) {
                    if (!input.parent().parent().find(".form-field-label").hasClass("form-field-active")) {
                        input.parent().parent().find(".form-field-label").addClass("form-field-active");
                    }
                }
            }
        });
        //解决提交按钮的click和blur事件冲突
        $(document).ready(function () {
            $("input[type='button']").mousedown(function (e) {
                e.preventDefault();
            });
            $("a[href='javascript:void(0);']").mousedown(function (e) {
                e.preventDefault();
            });

        });
    </script>

    <script type="text/javascript">
        //选择账号类型
        $(document).ready(function () {
            //选择
            $(".tabs-nav").find(".tabs-tab").each(function () {
                if ($(this).find("a").hasClass("active")) {
                    selectAccountType($(this).attr("id"));
                }

                $(this).bind("click", function (e) {
                    $(".tabs-nav").find(".tabs-tab").each(function () {
                        $(this).find("a").removeClass("active");
                    });
                    $(this).find("a").addClass("active");
                    selectAccountType($(this).attr("id"));
                });
            });
        });

        function selectAccountType(id) {
            if (id == "local_tab") {//本地账号密码用户
                $("#userName_field_error").parent().show();
                $("#mobile_field_error").parent().hide();
                $("#smsCode_field_error").parent().hide();
            }
            if (id == "mobile_tab") {//手机用户
                $("#userName_field_error").parent().hide();
                $("#mobile_field_error").parent().show();
                $("#smsCode_field_error").parent().show();
            }
        }


        //回车键登录
        $(document).keyup(function (event) {
            if (event.keyCode == 13) {
                ajaxSubmit();
            }
        });

        //点击输入框提示
        function inputBoxClickTip(obj) {


        }

        //离开输入框提示
        function inputBoxOutTip(obj) {
            verification(obj.id);
        }

        //验证参数
        function verification(field) {
            $("#" + field + "_prompt_error").hide();
            $("#" + field + "_field_error").removeClass("form-field-error");

            if (field == "userName") {//用户名
                var userName = $("#" + field).val().trim();
                if (userName == "") {
                    $("#" + field + "_prompt_error").html("用户名不能为空");
                    $("#" + field + "_prompt_error").show();
                    $("#" + field + "_field_error").addClass("form-field-error");
                    return false;
                }
                if (getStringLeng(userName) < 3) {
                    $("#" + field + "_prompt_error").html("用户名长度不能小于3位");
                    $("#" + field + "_prompt_error").show();
                    $("#" + field + "_field_error").addClass("form-field-error");
                    return false;
                }
                if (getStringLeng(userName) > 20) {
                    $("#" + field + "_prompt_error").html("用户名长度不能大于20位");
                    $("#" + field + "_prompt_error").show();
                    $("#" + field + "_field_error").addClass("form-field-error");
                    return false;
                }
                var pattern = /^\w+$/;
                if (!pattern.test(userName)) {
                    $("#" + field + "_prompt_error").html("用户名只能输入由数字、26个英文字母或者下划线组成");
                    $("#" + field + "_prompt_error").show();
                    $("#" + field + "_field_error").addClass("form-field-error");
                    return false;
                }
            }
            if (field == "mobile") {//手机号
                var mobile = $("#" + field).val().trim();
                if (mobile == "") {
                    $("#" + field + "_prompt_error").html("手机号不能为空");
                    $("#" + field + "_prompt_error").show();
                    $("#" + field + "_field_error").addClass("form-field-error");
                    return false;
                }
                if (getStringLeng(mobile) < 11) {
                    $("#" + field + "_prompt_error").html("手机号不正确");
                    $("#" + field + "_prompt_error").show();
                    $("#" + field + "_field_error").addClass("form-field-error");
                    return false;
                }

            }

            if (field == "password") {//密码
                var password = $("#" + field).val().trim();
                if (password == "") {
                    $("#" + field + "_prompt_error").html("密码不能为空");
                    $("#" + field + "_prompt_error").show();
                    $("#" + field + "_field_error").addClass("form-field-error");
                    return false;
                }
                if (getStringLeng(password) < 6) {
                    $("#" + field + "_prompt_error").html("密码长度不能小于6位");
                    $("#" + field + "_prompt_error").show();
                    $("#" + field + "_field_error").addClass("form-field-error");
                    return false;
                }
                if (getStringLeng(password) > 20) {
                    $("#" + field + "_prompt_error").html("密码长度不能大于20位");
                    $("#" + field + "_prompt_error").show();
                    $("#" + field + "_field_error").addClass("form-field-error");
                    return false;
                }
            }

            if (field == "captchaValue") {//验证码
                if (!$("#captchaValue_field").is(":hidden")) {//如果验证码框显示
                    var captchaKey = $("#captchaKey").val().trim();
                    var captchaValue = $("#" + field).val().trim();
                    if (captchaValue == "") {
                        $("#" + field + "_prompt_error").html("验证码不能为空");
                        $("#" + field + "_prompt_error").show();
                        $("#" + field + "_field_error").addClass("form-field-error");
                        return false;
                    }

                    get_request(function (value) {
                        if (value == "false") {
                            $("#" + field + "_prompt_error").html("验证码错误");
                            $("#" + field + "_prompt_error").show();
                            $("#" + field + "_field_error").addClass("form-field-error");
                        }
                    },
                        "userVerification.htm?captchaKey=" + captchaKey + "&captchaValue=" + captchaValue + "&timestamp=" + new Date().getTime(), true);

                }
            }
        }

        //更换验证码
        function replaceCaptcha() {
            var captchaKey = document.getElementById("captchaKey").value;
            document.getElementById("captcha").src = "captcha/" + captchaKey + ".jpg?" + Math.random();
        }

        //组装参数
        function getParameter() {
            var parameter = "";

            //url跳转参数
            var jumpUrl = getUrlParam("jumpUrl");
            if (jumpUrl != null) {
                parameter += "&jumpUrl=" + encodeURIComponent(jumpUrl);
            }
            //令牌标记
            var token = $("#token").val();
            parameter += "&token=" + token;
            //验证码Key
            parameter += "&captchaKey=" + encodeURIComponent($("#captchaKey").val());
            //验证码值
            parameter += "&captchaValue=" + encodeURIComponent($("#captchaValue").val());
            //用户类型
            if ($("#local_tab").find("a").hasClass("active")) {
                parameter += "&type=10";
                //用户名
                parameter += "&userName=" + encodeURIComponent($("#userName").val().trim());
            }
            if ($("#mobile_tab").find("a").hasClass("active")) {
                parameter += "&type=20";
                //手机号
                parameter += "&mobile=" + encodeURIComponent($("#mobile").val().trim());
            }
            //密码需SHA256加密
            var password = $("#password").val().trim();
            if (password != "") {
                parameter += "&password=" + CryptoJS.SHA256(password);
            }
            //自动登录
            var rememberMe = $("input[id='rememberMe']:checked").val();
            if (rememberMe != null) {
                parameter += "&rememberMe=" + rememberMe;
            }
            //删除第一个&号,防止因为多了&号而出现警告: Parameters: Invalid chunk ignored.信息
            if (parameter.indexOf("&") == 0) {
                parameter = parameter.substring(1, parameter.length);
            }
            return parameter;
        }

        //ajax提交
        function ajaxSubmit() {
            if (allVerification() == false) {
                return;
            }
            var parameter = getParameter();
            post_request(function (value) {
                if (value != "") {
                    var returnValue = JSON.parse(value);//JSON转为对象
                    var key_success = "";
                    var key_error = null;
                    var key_jumpUrl = null;
                    var key_captchaKey = null;

                    for (var key in returnValue) {
                        if (key == "success") {
                            key_success = returnValue[key];
                        } else if (key == "error") {
                            key_error = returnValue[key];
                        } else if (key == "jumpUrl") {//跳转URL
                            key_jumpUrl = returnValue[key];
                        } else if (key == "captchaKey") {//显示验证码
                            key_captchaKey = returnValue[key];
                        }
                    }
                    //登录成功
                    if (key_success == "true") {
                        //跳转
                        if (key_jumpUrl != null) {
                            window.location.href = (getBasePath() + key_jumpUrl);
                        }
                    } else {
                        //显示错误
                        if (key_error != null) {
                            for (var error in key_error) {
                                if (error != "") {
                                    if (error == "token") {//如果令牌错误
                                        //刷新当前页面
                                        window.location.reload();
                                    }
                                    $("#" + error + "_prompt_error").html(key_error[error]);
                                    $("#" + error + "_prompt_error").show();
                                    $("#" + error + "_field_error").addClass("form-field-error");
                                }
                            }
                        }
                        if (key_captchaKey != null) {
                            $("#captchaValue_field").show();
                            //设置验证码Key
                            $("#captchaKey").val(key_captchaKey);
                            //设置验证码图片
                            replaceCaptcha();
                        }
                    }
                }
            },
                "login?&timestamp=" + new Date().getTime(), true, parameter);
        }

        //验证全部参数
        function allVerification() {
            var isVerification = true;

            //用户类型
            if ($("#local_tab").find("a").hasClass("active")) {
                if (verification("userName") == false) {
                    isVerification = false;
                }
            }
            if ($("#mobile_tab").find("a").hasClass("active")) {
                if (verification("mobile") == false) {
                    isVerification = false;
                }
            }
            if (verification("password") == false) {
                isVerification = false;
            }
            return isVerification;
        }
    </script>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {visible: false}
        }
    })
</script>
</html>
